import React, { Component } from 'react'
import { isEqual } from 'loadsh'
import classNames from 'classnames'
import styles from './style.module.less'

class CardHead extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState)
  }

  renderCustom = () => {
    const { renderCustom, settings, filters, setFilters } = this.props
    if (renderCustom) {
      return renderCustom({ settings, filters, setFilters })
    }
    return null
  }
  render() {
    const { title, cardHeadClassName, zoomShow } = this.props
    return (
      <div className={classNames(styles.cardHead, cardHeadClassName)}>
        <div className={title ? classNames(styles.title, styles.titleBorder) : styles.title}>
          {title}
        </div>
        <div className={styles.filter}>{this.renderCustom()}</div>
      </div>
    )
  }
}

export default CardHead
